<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        *{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul{
            width: 750px;
            height: 600px;
            background-color: skyblue;
            display: flex;
            /* flex-wrap: wrap;
            align-content:flex-start; */
            /* justify-content:space-between;
            align-items: center;
            flex-direction: column; */
        }
        li{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
        }
        .son1{
            flex-grow: 0;
        }
        .son2{
            flex-grow: 0;
        }
        .son3{
            flex-grow: 1;
            align-self:flex-end;
        }
    </style>
    <!-- <style>
      .box {
        width: 300px;
        height: 300px;
        background-color: red;
        padding: 10px;
        border: 5px solid black;
        margin: 10px;
      }
      .box1 {
        width: 300px;
        height: 300px;
        background-color: pink;
        box-sizing: border-box;
        padding: 10px;
        margin: 10px;
        border: 5px solid black;
      }
    </style>
  </head>
  <body>
    inline-block 问题： 1.空白间隙 font-size：0 2.对齐方式 1.w3c盒子模型
    总的宽度=（我们设置的宽度）内容宽度+左右内边距+左右边框+左右外边距
    2.怪异盒子模型（ie盒子模型）
    总的宽度=我们设置的宽度（内容的宽度+左右内边距+左右边框）+左右外边距 
    控制盒子模型的属性 box-sizing：border-box；  box-sizing：center-box
    <div class="box"></div>
    <div class="box1"></div> -->
    flex 弹性盒子 作用：用来布局，解决元素共行的问题。
    1.如果我们要使用弹性盒子去布局
       一定要在对应布局元素的爸爸元素中设置 display：flex;才能使用弹性盒子的内容

       当我们设置儿子们的总宽度 超过了爸爸的宽度的时候，
       儿子的宽度设置无效，是通过爸爸的动态平均分配设置，
       如果不超过，那么该多大就多大

       当设置了display：flex 水平方向 叫 主轴  垂直方向 叫 侧轴
    2.常用属性
    爸爸设置的
        flex-direction   可以用来改变主轴和侧轴
            row          主轴：水平且左到右
            row-reverse  主轴：水平且右到左
            column       主轴：垂直且上到下
            column       主轴：垂直且下到上
        flex-wrap
            nowrap       不换行
            wrap         换行
        justify-content  控制主轴的排列方式
            space-around    子元素两端不贴边，空白间隙平均分配
            space-between   子元素两端贴边，空白间隙平均分配
            flex-start      子元素左对齐，空白间隙不会平均分配
            flex-end        子元素右对齐，空白间隙不会平均分配
        align-items      控制侧轴的排列
        center           子元素垂直居中
            flex-start      子元素顶部
            flex-end        子元素底部
        align-content
            前提：元素一定是已经换行的，
            作用：设置多行元素的侧轴的排列方式
            center       多个子元素在父元素的中间
            flex-start   多个子元素在爸爸的顶部
            flex-end     多个子元素在爸爸的底部
    儿子设置的
        flex
        align-self       作用：设置单独的一个弹性元素子盒子侧轴方向
        flex-grow        膨胀因子
        flex-shrink      缩减因子
        作用：用来分配剩余空间
           计算过程：爸爸宽度 - 子元素总宽度 = 空白宽度
                       800        3* 100  =  500
    <ul>
        <li class="son1">第一个盒子</li>
        <li class="son2">第二个盒子</li>
        <li class="son3">第三个盒子</li>
        <!-- <li>第四个盒子</li> -->
    </ul>
  </body>
</html>
